<template>
    <body>
        <div class="login-panel">    
            <n-card id="card" title="用户注册" >
                <n-form :rules="rules" :model="user">    
                    <n-form-item label="账号" path="account">
                        <n-input v-model:value="user.account" placeholder="请输入账号"/>
                    </n-form-item>
                    <n-form-item label="密码" path="password">
                        <n-input v-model:value="user.password" type="password" placeholder="请输入账号"/>
                    </n-form-item>  
                    <n-form-item path="repeatPassword" label="重复密码">
                        <n-input v-model:value="user.repeatPassword" type="password" placeholder="请再次输入密码"/>
                  </n-form-item>    
                </n-form>
                <template #footer>
                    <n-button @click="back" type="warning" style=" margin-right: 20px;" >返回</n-button>
                    <n-button @click="register" type="info" style="float:right">注册</n-button>
                </template>
            </n-card>
        </div>
    </body>
</template>

<script setup>

import {ref,reactive,inject} from 'vue'
import {useRouter,useRoute} from 'vue-router'


const router = useRouter()
const route = useRoute()


const axios = inject("axios")
const message = inject("message")

//验证规则
let rules = {
    account:[
        {required:true,message:"请输入账号",trigger:"blur"},
        {min:3,max:12,message:"长度在3-12",trigger:"blur"},
    ],
    password:[
        {required:true,message:"请输入密码",trigger:"blur"},
        {min:3,max:18,message:"长度在3-18",trigger:"blur"},
    ],
    repeatPassword: [
        {required: true,trigger: ["input", "blur"],
            validator(rule, value) {
                if(!value){
                    return new Error('请再次输入密码')
                }else if(user.password != value){
                    return new Error('两次输入的密码不一致')
                }
                return true
            },  
        }
    ]
};

let user = reactive({
    account:"",
    password:"",
    repeatPassword:"",
    rember:false
})



const back = async () => {
    router.push("/login")
}

const register = async () => {
    let result = await axios.post("/register/register",{
        account:user.account,
        password:user.password
    });
    if(result.data.code == 200){
        router.push("/login")
        message.success("注册成功")
    }else if(result.data.code == 501){
         message.error("注册失败,账号已存在");
    }else{
        message.error("注册失败");
    }
}

</script>



<style lang="scss" scoped>
#card{
    border-radius: 25px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 350px;
    height: 400px;
    border-top: 1px solid rgba(255,255,255,0.5);
    border-left: 1px solid rgba(255,255,255,0.5);
    border-bottom: 1px solid rgba(255,255,255,0.2);
    border-right: 1px solid rgba(255,255,255,0.2);
    backdrop-filter: blur(10px);
    background: rgba(50,50,50,0.2);
}
body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: url(image/bg.jpg) no-repeat;
    background-size: cover;
}

</style>






